﻿@model KL.Store.Web.Models.LinkedProductsModel
@using KL.Store.Core
@{
    ViewBag.Title = "EditLinked";
    Layout = null;
}
<h3>Bağlı Ürün Yönetimi</h3>
<hr />
<div class="col-sm-5 editLinkedList">
    <h4>Mevcut Bağlı Ürünler</h4>
    <ul class="editLinkedListUl">
        @foreach (var item in Model.Products)
        {
            <li>
                <span><i class="fa fa-remove fa-2x" data-id="@item.Id" ></i>&nbsp;@item.LinkedId - @item.ProductName</span>
            </li>
        }
    </ul>
</div>
<div class="col-sm-7">
    <h4>Yeni Bağlı Ürün Ekle</h4>
    @using (Ajax.BeginForm("AddLinkedProduct", "ProductManage", new { }, new AjaxOptions { HttpMethod = "Post", OnBegin = "loadingMsg();", OnSuccess = "hideMsg();", OnFailure = "hataMesaji('İşlem sırasında bir hata oluştu.')" }, new { id = "AddLinkedProduct", name = "AddLinkedProduct", @class = "form-horizontal" }))
    {
        <input type="hidden" name="ProductId" value="@Model.ProductId" />
        <div class="form-group">
            <label for="searchProduct" class="col-sm-2 control-label">Ürün Ara</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="searchProduct" id="searchProduct" placeholder="Ürün adını yazınız">
                <div id="productsearch_search_results" class="window productsearchview" style="display: none;">
                    <div id="divProductSearchResult" style="padding: 6px;">
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div id="linkedList" class="col-xs-12">
                <ul>
                </ul>
            </div>
            <div id="formResult" class="col-xs-12">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">Ekle</button>
            </div>
        </div>
        <div id="piResult" style="display: none;"></div>
        <div class="loading"></div>
    }
</div>
<script>

    function GetSearchProduct()
    {
        var myText = $("#searchProduct").val();
        $.ajax({
            url: '/Search/LiveSearchFull?search=' + myText,
            type: 'POST',
            success: function (result)
            {
                $("#divLoadingGif").css("display", "none");
                var myProductList = $(result);
                var myHtlmString = '';
                $.each(myProductList[0].LiveSearch, function (key, val)
                {
                    myHtlmString += '<li><a href="javascript:void(0)" data-id="' + val.ProductId + '">' + val.ProductId + ' - ' + val.Barcode + ' - ' + val.ProductName + '</a></li>';
                });
                myHtlmString = '<ul id="live_productsearch_results">' + myHtlmString + '</ul>';
                $("#divProductSearchResult").html(myHtlmString);
            }
        });
    }
    var search = (function ()
    {
        var builder = function ()
        {
            $(document).ready(function ()
            {
                var object = $('#searchProduct', $('.window.productsearchview').hide().parent()).focus(function ()
                {
                    this.active = true;
                    var value = $.trim(this.value);
                    if (value == object.data('empty'))
                    {
                        object.val('').parent().addClass('focus');
                    } else if (value.length >= 3) { search.show(); }
                }).blur(function ()
                {
                    this.active = false;

                    $(this.parentNode).removeClass('focus');
                    if ($.trim(object.val()) == '') { object.val(object.data('empty')); }
                }).keyup(function ()
                {
                    if (object.val().length >= 4)
                    {
                        $("#divLoadingGif").css("display", "block");
                        GetSearchProduct();
                        search.show();
                        $(this.parentNode).removeClass('focus');
                    } else
                    {
                        search.hide();
                        $(this.parentNode).addClass('focus');
                    }
                });

                var parent = object.parents('.container').hover(function () { this.active = true; }, function ()
                {
                    this.active = false;
                    if (!object.prop('active')) { search.hide(); }
                });
            });
        }
        builder.prototype = {
            busy: false,
            show: function () { $('.window.productsearchview').stop(true, true).animate({ opacity: 'show', height: 'show' }, 'fast'); },
            hide: function () { $('.window.productsearchview').stop(true, true).animate({ opacity: 'hide', height: 'hide' }, 'fast'); }
        };

        return new builder();
    })();
</script>
